<script setup lang="ts">
defineOptions({
  name: "Company",
});

const isLastTwo = computed(() => (index: number) => index >= 4);
</script>

<template>
  <div class="grid grid-cols-3 gap-6">
    <!-- 企业top前三 -->
    <div
      class="bg-[#0C0E3A] rounded-lg overflow-hidden bg-choose-company px-8 py-8"
    >
      <div class="font-bold text-white text-center text-3xl mb-6">
        优选企业榜单
      </div>
      <div class="flex flex-col gap-6">
        <div class="top-one rounded-lg p-4">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <el-image
                src="~/assets/images/logo/logo.png"
                style="width: 160px; height: 100px"
                class="rounded-lg flex-shrink-0"
              ></el-image>
            </div>
            <div class="flex flex-col flex-1 min-w-0 ml-3">
              <div class="truncate text-2xl">
                游离工作室游离工作室游离工作室游离工作室游离工作室
              </div>
              <div class="flex items-center my-2">
                <img
                  src="/assets/images/company/gold.png"
                  class="w-[30px] h-[30px]"
                />
                <div class="text-[#FFA500]">金牌会员</div>
              </div>
              <div class="flex items-center text-sm">
                <span>主营：</span>
                <span class="ml-2">成功农业批发</span>
              </div>
            </div>
          </div>
          <div class="grid grid-cols-3 mt-4">
            <div class="flex items-center text-gray-400">
              <Icon name="icon-park-outline:diamonds" class="text-xl" />
              <span class="text-sm ml-1">优秀服务商</span>
            </div>
            <div class="flex items-center text-gray-400">
              <Icon name="icon-park-outline:star" class="text-xl" />
              <span class="text-sm ml-1">信赖企业</span>
            </div>
            <div class="flex items-center text-gray-400">
              <Icon name="icon-park-outline:message" class="text-xl" />
              <span class="text-sm ml-1">好评100%</span>
            </div>
          </div>
        </div>
        <div class="top-two rounded-lg p-4">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <el-image
                src="~/assets/images/logo/logo.png"
                style="width: 160px; height: 100px"
                class="rounded-lg flex-shrink-0"
              ></el-image>
            </div>
            <div class="flex flex-col flex-1 min-w-0 ml-3">
              <div class="truncate text-2xl">
                游离工作室游离工作室游离工作室游离工作室游离工作室
              </div>
              <div class="flex items-center my-2">
                <img
                  src="/assets/images/company/gold.png"
                  class="w-[30px] h-[30px]"
                />
                <div class="text-[#FFA500]">金牌会员</div>
              </div>
              <div class="flex items-center text-sm">
                <span>主营：</span>
                <span class="ml-2">成功农业批发</span>
              </div>
            </div>
          </div>
          <div class="grid grid-cols-3 mt-4">
            <div class="flex items-center text-gray-400">
              <Icon name="icon-park-outline:diamonds" class="text-xl" />
              <span class="text-sm ml-1">优秀服务商</span>
            </div>
            <div class="flex items-center text-gray-400">
              <Icon name="icon-park-outline:star" class="text-xl" />
              <span class="text-sm ml-1">信赖企业</span>
            </div>
            <div class="flex items-center text-gray-400">
              <Icon name="icon-park-outline:message" class="text-xl" />
              <span class="text-sm ml-1">好评100%</span>
            </div>
          </div>
        </div>
        <div class="top-three rounded-lg p-4">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <el-image
                src="~/assets/images/logo/logo.png"
                style="width: 160px; height: 100px"
                class="rounded-lg flex-shrink-0"
              ></el-image>
            </div>
            <div class="flex flex-col flex-1 min-w-0 ml-3">
              <div class="truncate text-2xl">
                游离工作室游离工作室游离工作室游离工作室游离工作室
              </div>
              <div class="flex items-center my-2">
                <img
                  src="/assets/images/company/gold.png"
                  class="w-[30px] h-[30px]"
                />
                <div class="text-[#FFA500]">金牌会员</div>
              </div>
              <div class="flex items-center text-sm">
                <span>主营：</span>
                <span class="ml-2">成功农业批发</span>
              </div>
            </div>
          </div>
          <div class="grid grid-cols-3 mt-4">
            <div class="flex items-center text-gray-400">
              <Icon name="icon-park-outline:diamonds" class="text-xl" />
              <span class="text-sm ml-1">优秀服务商</span>
            </div>
            <div class="flex items-center text-gray-400">
              <Icon name="icon-park-outline:star" class="text-xl" />
              <span class="text-sm ml-1">信赖企业</span>
            </div>
            <div class="flex items-center text-gray-400">
              <Icon name="icon-park-outline:message" class="text-xl" />
              <span class="text-sm ml-1">好评100%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 企业列表 -->
    <div class="col-span-2">
      <div class="company-list-bg px-3 pt-8 grid grid-rows-[auto_1fr]">
        <div
          class="text-2xl px-9 font-bold flex-1 flex items-center justify-between h-[100px] border-b"
        >
          <span>优选企业列表</span>
          <img src="/assets/images/company/vip.png" class="w-[60px] h-[60px]" />
        </div>
        <div class="grid grid-cols-2 grid-rows-3 h-full">
          <div
            class="px-9 flex items-center"
            v-for="(item, index) in 6"
            :key="item"
            :class="{ 'border-b': !isLastTwo(index) }"
          >
            <div
              class="w-[150px] h-[150px] rounded-lg bg-white flex items-center justify-center flex-shrink-0"
            >
              <img
                src="/assets/images/logo/logo.png"
                class="w-[80px] h-[80px]"
              />
            </div>
            <div class="flex flex-col flex-1 min-w-0 ml-3">
              <div class="truncate text-2xl">
                游离工作室游离工作室游离工作室游离工作室游离工作室
              </div>
              <div class="flex items-center my-4">
                <img
                  src="/assets/images/company/gold.png"
                  class="w-[30px] h-[30px]"
                />
                <div class="text-[#FFA500]">金牌会员</div>
              </div>
              <div class="flex items-center text-base zhuying px-3">
                <span class="text-white">主营：</span>
                <span class="ml-3">农业批发</span>
                <span class="ml-3">建材</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.bg-choose-company {
  box-shadow: inset 10px 10px 20px 0 rgb(194, 194, 194);
}
.top-one {
  background: linear-gradient(to right, #ffd84c, #fff5d0, #ffd84c);
}
.top-two {
  background: linear-gradient(to right, #d5d5d5, #efefef, #d5d5d5);
}
.top-three {
  background: linear-gradient(to right, #dbab7f, #ffd7b2, #dbab7f);
}
.company-list-bg {
  background: url("/assets/images/bg/company-list-bg.png") no-repeat center;
  height: 715px;
}
.zhuying {
  background: linear-gradient(to right, #ffe88b, #ffc584);
  border-radius: 10px 10px 10px 0px;
}
</style>
